<template>
  <div class="Header fixed top-0 right-0 z-999 w-full h-14 bg-[rgb(44,120,191)] flex items-center justify-between px-4">
    <div></div>
    <!-- 在线人数 -->
    <div class="text-white text-lg font-bold">
      飞行区内人数：<span class="text-yellow-400 text-xl">{{ onlineCount }}</span> 人
    </div>
    <!-- 报警按钮 -->
    <el-popover 
      placement="bottom" 
      :width="`98vw`"
      trigger="click"
    >
      <template #reference>
        <el-button class="Header_alarm" style="margin-right: 16px">
          <div class="Header_alarmBox">
            <div class="Header_alarmCountNum">{{ alarmCount }}</div>
          </div>
        </el-button>
      </template>
      <el-table :data="gridData" class="flex p-10px">
        <el-table-column width="`20%`" prop="number" label="设备号码" />
        <el-table-column width="`20%`" prop="message" label="人员信息" />
        <el-table-column width="`20%`" prop="time" label="触发时间" />
        <el-table-column width="`20%`" prop="area" label="触发区域" />
        <el-table-column width="`20%`" prop="buttom" label="查看按钮" />
      </el-table>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import EventBus from './EventBus';

const sessionId = ref<string | null>(null); // 存储 sessionId
const onlineCount = ref(0); // 定义在线人数的状态
const alarmCount = ref(0); // 定义报警计数的状态
const gridData = ref([]); // 定义报警数据的状态


// 登录接口获取动态 sessionId
const login = await fetch(`http://47.100.168.221:9999/gps-web/api/login.jsp?password=c65c636e668a7872e393058856be20f5&userId=SHJC_PDGJ&loginType=user`);
const loginData = await login.json();
sessionId.value = loginData.sessionId;


// 获取在线人数
const fetchOnlineCount = async () => {
  const response = await fetch(`http://47.100.168.221:9999/gps-web/api/get_region_car.jsp?sessionId=${sessionId.value}&regionIds=123`);
  const data = await response.json();
  if (data && data.list && data.list.length > 0) {
    onlineCount.value = data.list[0].carList.length;
    const carIds = data.list[0].carList.map((car: any) => car.carId);
    fetchAlarmData(carIds);
  } else {
    console.error("Invalid data format or response code");
  }
};

// 获取报警数据
const fetchAlarmData = async (carIds: number[]) => {
  const ids = carIds.join(',');
  const response = await fetch(`http://47.100.168.221:9999/gps-web/api/get_alarm_h_pfm_multiple.jsp?sessionId=${sessionId.value}&startTime=2024-07-01 16:02:19&endTime=2024-07-31 16:02:19&carIds=${ids}`);
  const data = await response.json();
  if (data && data.list) {
    const alarms = data.list.flatMap((item: any) => item.list).filter((alarm: any) => alarm.solveState === '0');
    gridData.value = alarms.map((alarm: any) => ({
      number: alarm.carId,
      message: alarm.plate,
      time: alarm.stime,
      area: alarm.ruleName,
      buttom: '查看'
    }));
  } else {
    console.error("Invalid data format or response code");
  }
};

onMounted(() => {
  fetchOnlineCount();

  // 监听 'updateAlarmCount' 事件
  EventBus.on('updateAlarmCount', (count: number) => {
    alarmCount.value = count;
  });
});
</script>

<style>
.Header_alarm {
  min-width: 45px;
  border-left: 1px dashed hsla(0, 0%, 100%, .2);
  background-image: url(/alarm.gif);
  background-size: auto 80%;
  background-position: center 16px !important;
  background-repeat: no-repeat;
  float: right;
  position: relative;
  color: #232323;
  padding-top: 0 !important;
  height: 100%;
  background-color: transparent; /* 确保背景颜色透明 */
  border: none; /* 去除默认边框 */
  /* margin-right: 30px;  */
}
.Header_alarmBox {
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
  padding: 0 8px;
}
.Header_alarmCountNum {
  display: inline-block;
  border: 1px solid #fff;
  background-color: #ef4d4d;
  color: #fff;
  line-height: 14px;
  border-radius: 8px;
  padding: 0 5px;
  position: absolute;
  margin-top: -20px;
  margin-left: -10px;
}
</style>